:root {
  /* 颜色变量 */
  --primary-color: #1890ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
  --text-color: #2c3e50;
  --text-color-secondary: #606266;
  --border-color: #dcdfe6;
  --light-bg: #f5f7fa;
  
  /* 布局变量 */
  --header-height: 60px;
  --header-height-mobile: 50px;
  --container-width: 1200px;
  --border-radius: 8px;
  --section-padding: 20px 0;  /* 从30px减少到20px */
  --card-padding: 12px;      /* 从15px减少到12px */
  --banner-height: 260px;    /* 从300px减少到260px */
  --banner-height-mobile: 180px; /* 从200px减少到180px */
  
  /* 动画变量 */
  --transition: all 0.3s ease;
}

/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 容器类 */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 12px;
}

/* 通用动效 */
.hover-effect {
  transition: var(--transition);
}

.hover-effect:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

@media (max-width: 992px) {
  .container {
    max-width: 720px;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 540px;
    padding: 0 10px;
  }
  
  .section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 10px;
  }
}

.section-title {
  font-size: 1.8rem;  /* 减小标题大小 */
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;  /* 减小标题下方间距 */
  color: var(--secondary-color);
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;  /* 调整装饰线位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 2px;
}
